import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Icon } from 'antd-mobile'
import { PositionDetail, AccountPage, RechargeResult } from '../account'
import { NavHeader } from '../common'
import { Commodity } from '../foreign-currency'

//
import { SwipeAction, List } from 'antd-mobile';

const SwipeActionExample = React.createClass({
  getInitialState() {
    return {
      items: ['00', '01', '02', '03', '04', '05'],
    };
  },
  onDelete(value) {
    const tempArr = this.state.items;
    this.setState({
      items: tempArr.filter(v => v !== value),
    });
  },
  render() {
    return (
      <div>
        <List>
          <SwipeAction
            style={{ backgroundColor: 'gray' }}
            autoClose
            right={[
              {
                text: '取消',
                onPress: () => console.log('取消'),
                style: { backgroundColor: '#ddd', color: 'white' },
              },
              {
                text: '删除',
                onPress: () => console.log('删除'),
                style: { backgroundColor: '#F4333C', color: 'white' },
              },
            ]}
            left={[
              {
                text: '回复',
                onPress: () => console.log('回复'),
                style: { backgroundColor: '#108ee9', color: 'white' },
              },
              {
                text: '取消',
                onPress: () => console.log('取消'),
                style: { backgroundColor: '#ddd', color: 'white' },
              },
            ]}
            onOpen={() => console.log('global open')}
            onClose={() => console.log('global close')}
          >
            <List.Item
              extra="更多"
              arrow="horizontal"
            >
                左右都可操作
            </List.Item>
          </SwipeAction>
        </List>
        <div>
          <p style={{ padding: '0.16rem 0.32rem' }}>多个实例：</p>
          <List>
            {this.state.items.map((item, i) => <SwipeAction
              style={{ backgroundColor: 'gray' }}
              autoClose
              key={i}
              right={[
                {
                  text: `删除${item}`,
                  onPress: () => this.onDelete(item),
                  style: { backgroundColor: '#F4333C', color: 'white' },
                },
              ]}
            >
              <List.Item extra="更多" arrow="horizontal" >
                item {item}
              </List.Item>
            </SwipeAction>
          )}
          </List>
        </div>
      </div>
    );
  },
});
//

export default class ComponentNotFound extends Component {
  constructor() {
    super()
    this.state = {
      //
    }
  }
  render() {
    return (
      <SwipeActionExample />
    )
    return (
      <Commodity />
    )
    return (
      <RechargeResult />
    )
    return (
      <div className={`rt-recharge-result-container`}>
        <NavHeader title="充值结果" />

        <div className={`cm-scrollable-container`}>
          <Icon type="cross-circle" />
          <Icon type="check-circle" />
          <div className={`-middle`}>
            充值失败
          </div>
          <div className={`-below`}>
            请重新尝试
          </div>
          <div className={`-row-wrapper`}>
            {
              Array(3).fill(1).map((v, i) => (
                <div
                  key={Math.random()}
                  className={`-row`}
                  >
                  <span className={`-lft`}>账户</span>
                  <span>131****1234</span>
                </div>
              ))
            }
          </div>
          <div className={`cm-main-button`}>返 回</div>
        </div>
      </div>
    )
    return (
      <div className={`rt-normal-page`}>
        <header>
          <Icon type="left" />
          <span>扫码支付</span>
        </header>
        <div className={`-scrollable-container`}>
          <div className={`-content`}>
            <div className={`-above`}>
              <section>
                <div className={`-symbol`}>
                  <span className={`-sequence`}>1</span>
                  <span>长按二维码，选择“识别图中二维码”</span>
                </div>
                <div>
                  <span className={`-sequence`}>2</span>
                  <span>完成支付后，点击下方“我已支付完成”</span>
                </div>
              </section>
            </div>
            <div className={`-separate-line2`}></div>
            <div className={`-qr-code`}>
              <img alt="qr-code" src={require('static/images/qr-code.png')} />
            </div>
          </div>
          <div className={`-btn`}>我已支付完成</div>
        </div>
      </div>
    )
    return (
      <div
        className={`rt-404-container`}
        onClick={() => {
          hashHistory.goBack()
        }}
      >
        ComponentNotFound
      </div>
    )
  }
}